<template>
  <video-player
    ref="videoPlayer"
    class="video-player-box"
    :options="playerOptions"
    :playsinline="true"
    custom-event-name="customstatechangedeventname"
  />
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'

export default {
  name: 'Player',
  components: {
    videoPlayer
  },
  props: {
    src: {
      type: String,
      required: true,
      default: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'
    }
  },
  data() {
    return {
      playerOptions: {
        width: '240',
        controls: false,
        muted: true,
        autoplay: true,
        language: 'en',
        sources: [{
          type: 'application/x-mpegURL',
          src: this.src
        }]
      }
    }
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.playerOptions.width = this.$refs.videoPlayer.$el.offsetWidth
    })
  },
  methods: {

  }
}
</script>
